<div class="container">
    <div class="block-header">
        <h2>Sparkline Charts <small>This plugin generates small inline charts using data supplied either inline in the HTML, or via javascript.</small></h2>

        <ul class="actions">
            <li>
                <a href="">
                    <i class="zmdi zmdi-trending-up"></i>
                </a>
            </li>
            <li>
                <a href="">
                    <i class="zmdi zmdi-check-all"></i>
                </a>
            </li>
            <li class="dropdown" uib-dropdown>
                <a href="" uib-dropdown-toggle>
                    <i class="zmdi zmdi-more-vert"></i>
                </a>

                <ul class="dropdown-menu dropdown-menu-right">
                    <li>
                        <a href="">Refresh</a>
                    </li>
                    <li>
                        <a href="">Manage Widgets</a>
                    </li>
                    <li>
                        <a href="">Widgets Settings</a>
                    </li>
                </ul>
            </li>
        </ul>

    </div>

    <div class="mini-charts">
        <div class="row">
            <div class="col-sm-3">
                <div class="mini-charts-item bgm-cyan">
                    <div class="clearfix">
                        <div class="chart stats-bar" data-sparkline-bar></div>
                        <div class="count">
                            <small>Website Traffics</small>
                            <h2>987,459</h2>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-sm-3">
                <div class="mini-charts-item bgm-lightgreen">
                    <div class="clearfix">
                        <div class="chart stats-bar-2" data-sparkline-bar></div>
                        <div class="count">
                            <small>Website Impressions</small>
                            <h2>356,785K</h2>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-sm-3">
                <div class="mini-charts-item bgm-orange">
                    <div class="clearfix">
                        <div class="chart stats-line" data-sparkline-line></div>
                        <div class="count">
                            <small>Total Sales</small>
                            <h2>$ 458,778</h2>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-sm-3">
                <div class="mini-charts-item bgm-bluegray">
                    <div class="clearfix">
                        <div class="chart stats-line-2" data-sparkline-line></div>
                        <div class="count">
                            <small>Support Tickets</small>
                            <h2>23,856</h2>
                        </div>
                    </div>
                </div>
            </div>


            <div class="col-sm-3">
                <div class="mini-charts-item bgm-teal">
                    <div class="clearfix">
                        <div class="chart chart-pie stats-pie" data-sparkline-pie></div>
                        <div class="count">
                            <small>Percentage</small>
                            <h2>99.87%</h2>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-sm-3">
                <div class="mini-charts-item bgm-red">
                    <div class="clearfix">
                        <div class="chart stats-line" data-sparkline-line></div>
                        <div class="count">
                            <small>Total Sales</small>
                            <h2>$ 458,778</h2>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-sm-3">
                <div class="mini-charts-item bgm-blue">
                    <div class="clearfix">
                        <div class="chart chart-pie stats-pie"></div>
                        <div class="count">
                            <small>Percentage</small>
                            <h2>99.87%</h2>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-sm-3">
                <div class="mini-charts-item bgm-pink">
                    <div class="clearfix">
                        <div class="chart stats-bar"></div>
                        <div class="count">
                            <small>Website Traffics</small>
                            <h2>987,459</h2>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <br/>
    <br>

    <div class="block-header">
        <h2>EASY PIE CHART <small>Lightweight jQuery plugin to render and animate nice pie charts with the HTML5 canvas element.</small></h2>

        <ul class="actions">
            <li>
                <a href="">
                    <i class="zmdi zmdi-trending-up"></i>
                </a>
            </li>
            <li>
                <a href="">
                    <i class="zmdi zmdi-check-all"></i>
                </a>
            </li>
            <li class="dropdown" uib-dropdown>
                <a href="" uib-dropdown-toggle>
                    <i class="zmdi zmdi-more-vert"></i>
                </a>

                <ul class="dropdown-menu dropdown-menu-right">
                    <li>
                        <a href="">Refresh</a>
                    </li>
                    <li>
                        <a href="">Manage Widgets</a>
                    </li>
                    <li>
                        <a href="">Widgets Settings</a>
                    </li>
                </ul>
            </li>
        </ul>

    </div>

    <div class="row">
        <div class="col-sm-3">
            <div class="epc-item bgm-pink">
                <div class="easy-pie main-pie" data-percent="45" data-easypie-chart>
                    <div class="percent">45</div>
                    <div class="pie-title">Total Emails Sent</div>
                </div>
            </div>
        </div>

        <div class="col-sm-3">
            <div class="epc-item bgm-orange">
                <div class="easy-pie main-pie" data-percent="88" data-easypie-chart>
                    <div class="percent">88</div>
                    <div class="pie-title">Sold Items</div>
                </div>
            </div>
        </div>

        <div class="col-sm-3">
            <div class="epc-item bgm-green">
                <div class="easy-pie main-pie" data-percent="25" data-easypie-chart>
                    <div class="percent">25</div>
                    <div class="pie-title">Spam Mails</div>
                </div>
            </div>
        </div>

        <div class="col-sm-3">
            <div class="epc-item bgm-purple">
                <div class="easy-pie main-pie" data-percent="89" data-easypie-chart>
                    <div class="percent">89</div>
                    <div class="pie-title">Profit Rate</div>
                </div>
            </div>
        </div>
    </div>

</div>
